<script setup lang="ts">
const { login, register } = useDailog();
import { Dialog, FrontendAuthContainer } from "#components";

defineProps<{ noDialog?: boolean }>();
const emit = defineEmits(["submit"]);
const { toast } = useStatus();
const { $post } = use$fetch();
const { auth } = useAuth();

const frm = reactive({
  email: "",
  password: "",
  re_password: "",
  captcha: "",
});

const handlSubmit = async () => {
  if (!frm.captcha) {
    toast.value = "请完成人机验证";
    return;
  }
  await $post<LoginResp>("/auth/user-register", { ...frm }, (v) => {
    auth.value = v;
    emit("submit");
    return v;
  });
};
const handleCaptchaVerify = (token: string) => {
  frm.captcha = token;
};
</script>

<template>
  <component :is="noDialog === true ? FrontendAuthContainer : Dialog">
    <form
      class="flex flex-col gap-y-4"
      autocomplete="off"
      @submit.prevent="handlSubmit"
    >
      <h2 class="text-xl text-center">用户注册</h2>

      <label class="grid grid-cols-12 items-center">
        <div class="col-span-4 lg:col-span-3 tracking-[2rem]">邮箱</div>
        <div
          class="border rounded group focus-within:border-gray-300 overflow-hidden col-span-8 lg:col-span-9"
        >
          <input
            class="block w-full outline-none px-2 py-1"
            type="email"
            placeholder="请输入你的邮箱"
            required
            v-model="frm.email"
          />
        </div>
      </label>

      <label class="grid grid-cols-12 items-center">
        <div class="col-span-4 lg:col-span-3 tracking-[2rem]">密码</div>
        <div
          class="border rounded group focus-within:border-gray-300 overflow-hidden col-span-8 lg:col-span-9"
        >
          <input
            class="block w-full outline-none px-2 py-1"
            type="password"
            placeholder="请输入你的密码"
            required
            v-model="frm.password"
          />
        </div>
      </label>

      <label class="grid grid-cols-12 items-center">
        <div class="col-span-4 lg:col-span-3">确认密码</div>
        <div
          class="border rounded group focus-within:border-gray-300 overflow-hidden col-span-8 lg:col-span-9"
        >
          <input
            class="block w-full outline-none px-2 py-1"
            type="password"
            placeholder="请输入你的密码"
            required
            v-model="frm.re_password"
          />
        </div>
      </label>

      <div class="lg:grid lg:grid-cols-12 lg:items-center">
        <div class="mb-2 lg:col-span-3 lg:mb-0">人机验证</div>
        <div class="lg:col-span-9">
          <HCaptcha @verify="handleCaptchaVerify" />
        </div>
      </div>

      <div class="flex justify-end items-center gap-x-2">
        <button class="px-3 py-1.5 bg-cyan-700 text-white rounded">注册</button>

        <button
          class="px-2 py-1"
          @click="
            () => {
              if (noDialog === true) {
                return navigateTo('/auth/user-login');
              } else {
                register = false;
                login = true;
              }
            }
          "
        >
          登录
        </button>
      </div>
    </form>
  </component>
</template>
